﻿<cms-page-header cms-parent-title="My Account"
                 cms-title="Change Password"></cms-page-header>

<cms-form cms-name="mainForm"
          ng-submit="vm.save()"
          cms-loading="vm.formLoadState.isLoading">

    <!-- Default toolbar -->
    <cms-page-actions>

        <cms-button-submit class="main-cta"
                           cms-text="Change Password"
                           ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                           cms-loading="vm.globalLoadState.isLoading"></cms-button-submit>

        <cms-button-link cms-text="Cancel"
                         cms-href="#/"></cms-button-link>

    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--MAIN-->
        <cms-form-section cms-title="Password">

            <cms-form-field-password cms-title="Current Password"
                                     cms-model="vm.command.oldPassword"
                                     required></cms-form-field-password>

            <cms-form-field-password cms-title="New Password"
                                     cms-model="vm.command.newPassword"
                                     minlength="8"
                                     maxlength="300"
                                     required></cms-form-field-password>

            <cms-form-field-password cms-title="Confirm new password"
                                     cms-model="vm.command.confirmNewPassword"
                                     maxlength="300"
                                     cms-match="vm.command.newPassword"
                                     cms-match-val-msg="Passwords must match"
                                     required></cms-form-field-password>

        </cms-form-section>

    </cms-page-body>

</cms-form>